*{
	margin: 0;
	padding: 0;
}
.box{
	width: 1200px;
	height: 50px;
	background-color: red;
	margin: 0 auto;
	color: white;
}
.box:before{
	content: "大于1200px";
	color: white;
}
/*媒体查询*/
@media screen and (max-width:1200px){
	.box{
		width: 980px;
		background-color: blue;
	}
	.box:before{
		content: "大于980小于1200px";
	}
}
@media screen and (max-width:980px){
	.box{
		width: 768px;
		background-color: yellowgreen;
	}
	.box:before{
		content: "大于768小于980px";
	}
}
@media screen and (max-width:768px){
	.box{
		width: 480px;
		background-color: pink;
	}
	.box:before{
		content: "大于480小于768px";
	}
}
@media screen and (max-width:480px){
	.box{
		width: 100%;
		background-color: darkmagenta;
	}
	.box:before{
		content: "小于480px";
	}
}